import { reactive, inject, provide, toRaw, toRef, toRefs } from 'vue'
import { ConsoleLogger } from '@/utils/debug-log'
import { ImageManage } from '@/core/mediaRecorder/image'
import { ERecorderOperation } from '@/core/mediaRecorder'

const console = new ConsoleLogger('视频录制图像hooks')

const useImageSymbol = Symbol('useImagestore')

export interface IRecordImageStoreFn {
  (): IRecordImageStore
  __CurrentStore?: IRecordImageStore
}
/** 图像管理节点*/

export interface IImageHooksState {
  activeManage: ImageManage | null
  imageUploadStatus: boolean
}

export interface IRecordImageStore {
  state: IImageHooksState
  init: (c: HTMLDivElement) => void
  getCurrentOp: () => ERecorderOperation | undefined
}

/**
 *  * useImageStore 用户hooks.
 * @function
 * @params {stu_id} StuID - 用户信息.{domId} domId
 * @returns store extend useImageProvide
 */
export const useImageProvide: () => IRecordImageStore = () => {
  console.log('初始化图像编辑')
  //判断学生id

  const state = reactive<IImageHooksState>({
    activeManage: null,
    imageUploadStatus: false,
  }) as IImageHooksState

  const init = (c: HTMLDivElement) => {
    state.activeManage = new ImageManage({}, c)
  }
  const getCurrentOp = () => state.activeManage?.operat
  const store: IRecordImageStore = {
    init,
    state,
    getCurrentOp,
  }

  provide(useImageSymbol, store)

  console.log('完成图像编辑初始化')
  return store
}

/**
 *  * useImageStore 用户hooks.
 * @function
 * @returns store extend IRecordImageStore
 */
export const useImageStore: IRecordImageStoreFn = () => {
  const store: IRecordImageStore = inject(useImageSymbol) as IRecordImageStore
  return store
}
